<template>
    <div class="index-container">
        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>示例页面</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="search-box mt-15">
            <div class="left">
                <div class="item">
                    <span class="span">这是下拉</span>
                    <el-select v-model="obj.val" class="width-200" placeholder="请选择">
                        <el-option v-for="(item,index) in [1,2,3,4,5]" :key="index" :label="'下拉'+(index+1)"
                                   :value="index"></el-option>
                    </el-select>
                </div>
                <div class="item">
                    <span class="span">这是输入</span>
                    <el-input v-model="obj.name" class="width-200" placeholder="请输入"></el-input>
                </div>
                <div class="item">
                    <span class="span">订单状态</span>
                    <el-select v-model="obj.val" class="width-200" placeholder="请选择">
                        <el-option v-for="(item,index) in [1,2,3,4,5]" :key="index" :label="'下拉'+(index+1)"
                                   :value="index"></el-option>
                    </el-select>
                </div>
                <div class="item">
                    <span class="span">订单状态</span>
                    <el-select v-model="obj.val" class="width-200" placeholder="请选择">
                        <el-option v-for="(item,index) in [1,2,3,4,5]" :key="index" :label="'下拉'+(index+1)"
                                   :value="index"></el-option>
                    </el-select>
                </div>
                <div class="item">
                    <span class="span">示例页面</span>
                    <el-select v-model="obj.val" class="width-200" placeholder="请选择">
                        <el-option v-for="(item,index) in [1,2,3,4,5]" :key="index" :label="'下拉'+(index+1)"
                                   :value="index"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="right">
                <el-button-group>
                    <el-button v-preventDbClick @click="getData" type="primary" icon="el-icon-search">查询</el-button>
                    <el-button v-preventDbClick @click="reset" type="primary" icon="el-icon-refresh">重置</el-button>
                </el-button-group>
            </div>
        </div>

        <div class="g-box mt-30" style="min-height:584px">
            <el-table :data="list" :fit="true" stripe border :header-cell-style="{background:'#eee'}">
                <el-table-column prop="id" label="ID" width="70"></el-table-column>
                <el-table-column label="购买人" width="80" align="center">
                    <template slot-scope="scope">
                        <img class="image"
                             :src="!!scope.row.user_image?scope.row.user_image:require('../../common/images/product-default.png')"/>
                    </template>
                </el-table-column>
                <el-table-column prop="user_nickname" label="购买人昵称" width="150"></el-table-column>
                <el-table-column label="微信支付订单" width="300">
                    <template slot-scope="scope">
                        <span>{{scope.row.wx_order_id || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="124">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick :plain="true" type="primary">支付超时</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="价格" width="100">
                    <template slot-scope="scope">
                        <span>-</span>
                    </template>
                </el-table-column>
                <el-table-column label="团购" width="80">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick type="primary">是</el-button>
                    </template>
                </el-table-column>
                <el-table-column width="200" label="创建时间">
                    <template slot-scope="scope">2021-12-12</template>
                </el-table-column>
                <el-table-column label="占位" width="300">
                    <template slot-scope="scope">
                        <span>{{scope.row.wx_order_id || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="占位" width="300">
                    <template slot-scope="scope">
                        <span>{{scope.row.wx_order_id || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="占位" width="300">
                    <template slot-scope="scope">
                        <span>{{scope.row.wx_order_id || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" border width="120" label="操作">
                    <template slot-scope="scope">
                        <i class="c-pointer el-icon-money mr-15 font16" title="设置特殊优惠"
                           @click="back(scope.row)"></i>
                        <i title="商家发货" class="c-pointer el-icon-truck mr-15 font16" @click="back(scope.row)"></i>
                    </template>
                </el-table-column>
            </el-table>
            <div class="clearfix"></div>
            <div class="pagination mt-30 mb-10 t-center">
                <el-pagination background layout="total,sizes,prev,pager,next,jumper"
                               :page-size="obj.size"
                               :page-sizes="[10,20,50,100]"
                               :current-page.sync="obj.page"
                               :total="total"
                               @size-change="changeSize"
                               @current-change="changeCurrent">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
import {tool} from "../../common/js/tool.js";

export default {
    data() {
        return {
            obj: {
                name: '',
                val: '',
                page: 1,
                size: 10
            },
            total: 100,
            list: []
        };
    },

    computed: {},

    created() {
        this.getData();
    },

    methods: {
        getData() {
            this.list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        },
        reset() {
        },
        changeCurrent(val) {
            this.obj.page = val;
            this.getData();
        },

        changeSize(e) {
            this.obj.size = e;
            this.obj.page = 1;
            this.getData();
        },
        back(id) {
            this.$confirm('确定要给客户退货吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                return tool.message('无操作权限', 'warning');
            });
        },
    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");

.index-container {
    .image {
        width: 50px;
        height: 50px;
        border: none;
        margin-top: 5px;
    }
}
</style>
